<script setup lang="ts">
import { reactive, ref, watch } from "vue";
const user = reactive({
  name: "tom",
  info: {
    gender: "男",
    age: 18,
  },
});

// 2. 监听多个响应式数据
// watch([数据1, 数据2, ...], 改变后回调函数)
//监听对象中属性的变化
// watch(
//   () => user.info.age,
//   (newValue, oldValue) => {
//     console.log(`新值：${newValue},老值：${oldValue}`);
//   },
// );

// // 4s改变数据
// setInterval(() => {
//   user.info.age++;
// }, 2000);

//3。监听对象中多个属性变化

//4.对整个对象进行侦听
watch(
  () => user.info.age,
  (newValue) => {
    console.log(newValue);
  },
  {
    //深度侦听
    deep: true,
    //一进入就执行一次回调函数
    immediate: true,
  },
);
</script>

<template>
  <p>
    姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
  </p>
  <button @click="user.info.gender = '女'">修改性别</button>
</template>
